<div id="js-p" style="width:100%;height:80%;position:absolute;left: 0;top:0;
      background-color: rgba(0,150,136,.3);"></div>
<script type="text/javascript" src="<!--# echo var='__CDN__' -->particles/particles.js"></script>
<script type="text/javascript">
;layui.use("jquery",function(){
  var mw = layui.$(window).width(),num=50,dis=100;
  if(mw < 960){   num=20;dis=60;   }
  /* config dom id (optional) + config particles params */
  particlesJS('js-p', {
    particles: {
      color: '#aaa',
      shape: 'circle', // "circle", "edge" or "triangle"
      opacity: 1,
      size: 4,
      size_random: true,
      nb: num,
      line_linked: {
        enable_auto: true,
        distance: dis,
        color: '#aaa',
        opacity: 1,
        width: 1,
        condensed_mode: {
          enable: false,
          rotateX: 600,
          rotateY: 600
        }
      },
      anim: {
        enable: true,
        speed: .5
      }
    },
    interactivity: {
      enable: true,
      mouse: {
        distance: 300
      },
      detect_on: 'canvas', // "canvas" or "window"
      mode: 'grab',
      line_linked: {
        opacity: .5
      },
      events: {
        onclick: {
          enable: true,
          mode: 'push', // "push" or "remove"
          nb: 2
        }
      }
    },
    /* Retina Display Support */
    retina_detect: true
  });
})
</script>